<template>
  <div>
    <Header></Header>
    <div class="read-test-list test-center w1200">
      <div class="test-container table-data">
        <div class="test-container-header flex-space-be">
          <div class="class-name">
            <span>
              当前课程：
              {{
                checkedBookData.edition_name + "-" + checkedBookData.grade_name
              }}
            </span>
          </div>
        </div>
        <div class="info-table">
          <div class="unit-select common-select pt20 mb20">
            <span>选择题型: </span>
            <el-select
              v-model="checkedQuestionType"
              @change="changeGetWord"
              clearable
              placeholder="请选择"
            >
              <el-option label="全部" :value="null"> </el-option>
              <el-option label="阅读理解" :value="2"> </el-option>
              <el-option label="完形填空" :value="5"> </el-option>
            </el-select>
          </div>
          <div class="clear-float common-table common-pagination">
            <el-table border :data="paperData.list" style="width: 100%">
              <el-table-column label="选择" class="radio-box">
                <template slot-scope="scope">
                  <el-radio
                    class="radio-box"
                    v-model="tableRadio"
                    :label="scope.row.question_id"
                  >
                    <span></span>
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="mode" label="类型">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.mode == 1 ? "水平测试" : "智能训练" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="mode" label="题型">
                <template slot-scope="scope">
                  <div>
                    {{
                      $store.getters.questionTypeObj[scope.row.question_type]
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="mode" label="分类">
                <template slot-scope="scope">
                  <div>
                    {{ $store.getters.readTypeObj[scope.row.category] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="question_num" label="题目数量">
              </el-table-column>
              <el-table-column prop="use_time" label="做题速度(秒)">
              </el-table-column>
              <el-table-column prop="address" label="平均正确率">
                <template slot-scope="scope">
                  <div class="table-text">
                    {{ scope.row.average_correct_rate }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="最后正确率">
                <template slot-scope="scope">
                  <div class="table-text">
                    {{ scope.row.last_correct_rate }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="finish_time" label="时间" width="180">
              </el-table-column>
              <el-table-column prop="address" label="详细">
                <template slot-scope="scope">
                  <div
                    class="table-text click"
                    @click="openTestPaper(scope.row.test_id)"
                  >
                    查看
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pt20">
              <el-button
                class="button button-bg-primary"
                :disabled="!tableRadio || $store.getters.isTeacher"
                @click="goTestQuestion"
              >
                选题自测
              </el-button>
              <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                class="fr"
                background
                :page-size="paperParams.pageSize"
                layout="prev, pager, next"
                :total="paperData.total_num"
                hide-on-single-page
                :current-page.sync="paperParams.pageNum"
                v-if="showPagination"
                :page-sizes="[2, 5, 10, 15, 20, 25, 30]"
              >
              </el-pagination>
              <!-- 
                  <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                class="fr"
                background
                :page-size="paperParams.pageSize"
                layout="prev, pager, next,sizes"
                :total="paperData.total_num"
                hide-on-single-page
                :current-page.sync="paperParams.pageNum"
                v-if="showPagination"
                :page-sizes="[2, 5, 10, 15, 20, 25, 30]"
              >
              </el-pagination>
               -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="查看详情"
      :visible.sync="dialogTestDataVisible"
      class="test-data-info"
    >
      <ReadingQuestion :paperData="testData"></ReadingQuestion>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/Header";
import ReadingQuestion from "../components/readingQuestion";
import { getReadPaperTest, getTestDataById } from "@/api/index";
export default {
  data() {
    return {
      checkedBookData: null,
      paperParams: {
        pageSize: 15,
        pageNum: 1,
      },
      paperData: {
        total_num: 0,
        list: [],
      },
      showPagination: true,
      dialogTestDataVisible: false,
      tableRadio: null,
      testData: {},
      checkedQuestionType: null,
      isCategory: false,
    };
  },
  components: {
    Header,
    ReadingQuestion,
  },
  methods: {
    goTestQuestion() {
      let data = this.paperData.list.filter((item) => {
        return item.question_id == this.tableRadio;
      })[0];
      if (data && data.mode == 1) {
        this.$router.push({
          name: "proficiencyTest",
          query: {
            questionType: data.question_type,
            checkedType: this.isCategory ? data.category : data.unit_id,
            questionId: data.question_id,
          },
        });
      } else if (data && data.mode == 0) {
        this.$router.push({
          name: "intelligentTrain",
          query: {
            questionType: data.question_type,
            checkedType: this.isCategory ? data.category : data.unit_id,
            questionId: data.question_id,
          },
        });
      }
    },
    openTestPaper(id) {
      getTestDataById(id)
        .then((res) => {
          if (res.code == 200) {
            let questionData = res.data.student_article_question_info;
            this.testData = {
              title: questionData.title,
              type: questionData.type,
              id: questionData.question_id,
              isAnswer: true,
              questionList:
                questionData.student_article_question_answer_info_list.map(
                  (question) => {
                    let newTitle = question.title;
                    if (questionData.type == 5) {
                      if (question.answer_type == 2) {
                        newTitle = "_____";
                      } else {
                        newTitle = "";
                      }
                    }
                    // if (questionData.type == 2) {
                    //   if (question.answer_type == 2) {
                    //     newTitle = newTitle + "_____";
                    //   }
                    // }
                    return {
                      questionId: question.question_id,
                      title: newTitle,
                      answerType: question.answer_type,
                      answerList: question.article_answer_info_list,
                      isTrue: question.is_true,
                      parse: question.parse,
                      trueAnswer: question.article_answer_info_list.filter(
                        (answer) => {
                          return answer.is_true == 1;
                        }
                      ),
                      studentAnswer: question.student_article_answer_info_list
                        ? question.student_article_answer_info_list.map(
                            (answer) => {
                              if (question.answer_type == 2) {
                                return answer.answer;
                              } else {
                                return answer.answer_id;
                              }
                            }
                          )
                        : [],
                      verifyAnswer: question.student_article_answer_info_list,
                    };
                  }
                ),
            };
            this.dialogTestDataVisible = true;
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "该题目已被删除或禁用",
          });
        });
    },
    studentIsTrue(question) {
      if (question.is_true == 0 || question.is_true == 1) {
        return question.is_true;
      } else {
        let isTrue =
          question.student_article_answer_info_list &&
          question.student_article_answer_info_list.length ==
            question.article_answer_info_list.filter((answer) => {
              return answer.is_true == 1;
            }).length &&
          question.student_article_answer_info_list.every((item) => {
            return item.is_true;
          });
        return isTrue;
      }
    },
    changeGetWord() {
      this.showPagination = false;
      this.paperParams.pageNum = 1;
      this.$nextTick(() => {
        this.showPagination = true;
      });
      this.getReadPaperTest();
    },
    handleCurrentChange(value) {
      this.paperParams.pageNum = value;
      this.getReadPaperTest();
    },
    handleSizeChange(value) {
      this.paperParams.pageSize = value;
      this.changeGetWord();
    },
    getReadPaperTest() {
      let data = {
        page_require: {
          page_num: this.paperParams.pageNum,
          page_size: this.paperParams.pageSize,
        },
        book_id: this.checkedBookData.book_id,
        article_question_type: this.checkedQuestionType,
      };
      getReadPaperTest(data).then((res) => {
        this.paperData = res.data;
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.isCategory =
      this.$store.getters.categoryBook.filter((item) => {
        return item == this.checkedBookData.book_id;
      }).length > 0;
    this.getReadPaperTest();
  },
  props: {
    type: {
      type: Number,
    },
    unitList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>